<template>
	<div>
		<Title>往期赛事</Title>
    <el-table
      v-loading="!cptts"
      :data="cptts?cptts:[]"
      height="calc(100vh - 150px)"
      :header-cell-style="{background:'#fafafa'}"
      :row-class-name="({row})=>`row-state-${row.type}`"
      class="w-full"
      :row-key="row=>`httable-${row.id}`"
    >
      <el-table-column type="expand"
      :filters="typefilters"
      :filter-method="(value,row)=>value == row.type"
      >
        <template v-slot="{ row,$index }">
          <div class="flex flex-col md:flex-row items-center md:items-start md:justify-between">
            <el-avatar class="flex-shrink-0" shape="square" :size="boxheight" :src="row.url" />
            <div 
              class="flex flex-col justify-between px-3 overflow-y-auto"
              :style="{height:`${boxheight}px`}"
            >
              <p>
                <i class="rounded shake-little el-icon-edit p-2 mx-1 cursor-pointer icon icon-ok"></i>
                <i class="rounded shake-little el-icon-share p-2 mx-1 cursor-pointer icon icon-ok"></i>
                <i class="rounded shake-little el-icon-delete p-2 mx-1 cursor-pointer icon icon-ok"></i>
              </p>
              <el-form
                label-position="left" 
                inline 
                class="demo-table-expand"
              >
                <el-form-item label="比赛名称">
                  <span>{{row.name}}</span>
                </el-form-item>
                <el-form-item label="比赛种类">
                  <span>{{ CodeToType[row.type] }}</span>
                </el-form-item>
                <el-form-item label="比赛结束时间">
                  <span>{{ row.enddate }}</span>
                </el-form-item>
                <el-form-item label="赛事详情">
                  <span @click="priview(row)">点击查看</span>
                </el-form-item>
                <el-form-item label="附件">
                  <span>NONE</span>
                </el-form-item>
                <el-form-item v-if="/[3,5]/.test(row.state)" label="比赛分组">
                  <span>{{row.isGrouping? '已分组':'未分组'}}</span>
                </el-form-item>
              </el-form>
            </div>
            
            <div 
              :style="{height:`${boxheight}px`,width:`${boxheight}px`}"
              :class="`items-${row.rankings?'start':'center'}`"
              class="flex flex-shrink-0 justify-center overflow-y-auto"
            >
              <div 
                v-if="row.rankings" 
                class="w-full infinite-list-wrapper" 
                style="overflow:auto"
              >
                <ul
                  class="list"
                  v-infinite-scroll="loadRanking(row)"
                  infinite-scroll-disabled="disabled">
                  <li 
                    :key="`ranking-${item.id}`"
                    v-for="item in row.rankings.slice(0,row.count)"
                    class="ranking-list-item"
                  >{{ item.NAME }}
                    <i 
                    
                    class="hidden rounded shake-little el-icon-delete p-2 mx-1 cursor-pointer icon icon-ok" />
                  </li>
                  <li class="ranking-list-item load" v-if="rankingloading">加载中<i class="el-icon-loading" /></li>
                  <li class="ranking-list-item load" v-if="row.rankings.length <= row.count">没有更多了</li>
                </ul>
              </div>
              <el-button v-else @click="getRanking(row.id,$index)">点击加载排名详情</el-button>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="比赛名称" />
      <el-table-column prop="enddate" label="结束时间" />
      <el-table-column label="冠军" >
        <template v-slot="{ row }">
          <div class="flex items-center">
            <svg class="inline" viewBox="0 0 1024 1024" width="24" height="24"><path d="M392 440.3l-148-73.2c-16.3-8.1-30.5 0.1-31.7 18.3l-10.6 164.8c-1.2 18.2 11.1 39.5 27.5 47.6L377.1 671c16.3 8.1 30.6-0.1 31.7-18.3l10.6-164.8c1.3-18.2-11.1-39.5-27.4-47.6z m339.3-195.9l-148-73.2c-16.3-8.1-30.6 0.1-31.7 18.3L541 354.2c-1.2 18.2 11.1 39.5 27.5 47.6l148 73.2c16.3 8.1 30.6-0.1 31.7-18.3l10.6-164.8c1.1-18.1-11.1-39.4-27.5-47.5z" fill="#FEAE30" p-id="2053"></path><path d="M559.9 725.4c5.7 9.9 16.6 11.4 27 5.4l81.9-47.4c8-4.6 10.8-14.6 6.3-22.6-4.6-8-14.8-10.7-22.8-6.2L599.7 685l13.6-33.2c14.8-36.2 20.5-56.1 5.9-81.4l-0.2-0.4c-16.3-28.2-47.6-34.6-78.9-16.5-22.9 13.2-32.3 29.6-36.3 50.6-0.8 4.2 0 9 2.1 12.5 4.9 8.4 15.5 11.2 23.8 6.4 5.2-3 7.7-7.6 8.4-11.2 3.1-13.9 7.5-21.8 17-27.4 11.9-6.8 24.2-4.8 31.6 7.9 7.2 12.5 4.8 25.2-5.2 51.4l-22.6 60c-2.9 7.9-2.7 15.3 1 21.7z" fill="#E5E5E5" p-id="2054"></path><path d="M900.9 507c10.5 24.5 6.1 52.3-9.8 72.9-36.9 44.8-118.5 108.5-221.2 169.1-100.4 59.1-193.4 98.9-250.1 110.2-26.4 4.3-53.7-5.9-70.2-27.8 0.3 0.4 0.4 1 0.8 1.4L110.2 522c0.1-0.3 0.6-0.2 0.2-1-6.8-11.7-2.6-26.8 9.3-33.6 4.5-2.7 9.6-3.2 14.5-2.8l222.5 45.9-16.3-294.3c-0.4-12.3 5.9-24.5 17.5-31.1 10.8-6.3 23.5-5.6 33.6-0.2l248.1 162.2 70.1-211.6c0.1 0 0.2 0.8 0.2 0.5 1.7-5.9 5.7-11.2 11.5-14.6 11.9-6.8 26.9-2.9 33.7 8.8 0.3 0.6 0.4 0.1 0.8 0.2l148 361.2c-1-1.6-2.2-2.7-3-4.6z" fill="#FED530" p-id="2055"></path><path d="M487.1 426.2c65.6-37.8 149.4-15.4 187.4 50.2 37.8 65.6 15.4 149.4-50.2 187.4-65.6 37.8-149.4 15.4-187.4-50.2s-15.4-149.4 50.2-187.4z" fill="#FEAE30" p-id="2056"></path><path d="M584.1 606.2c6.1 10.6 19.6 14.2 30.2 8.1 10.6-6.1 14.2-19.6 8.1-30.2l-62.3-102.7c-6.1-10.6-19.6-14.2-30.2-8.1l-0.5 0.3c-5.3 3-10.1 7.5-16.2 13.7L492.5 509c-6.5 6.8-7.8 16.2-3.2 24 5.2 9.1 17.4 12.1 26.4 6.8 2.1-1.2 4.4-3.2 6.2-5l11.6-11.4 50.6 82.8z" fill="#FED530" p-id="2057"></path></svg>
            <el-tag 
              v-for="item in row.champion" 
              class="select-none cursor-pointer"
              effect="plain"
              size="mini"
              type="warning"
            >{{item}}</el-tag>
          </div>
        </template>
      </el-table-column>
    </el-table>
    
    <el-dialog 
      title="比赛详情" 
      :visible.sync="showDialog"
      width="80%"
    >
      <chart-tree
      style="height:60vh;width: 100%;"
      />
    </el-dialog>
	</div>
</template>

<script>
import setShow from './modules/cpttSetShow'
import { CodeToState,CodeToType } from '@/conf'
import { getHisCptt,getRanking } from '@/api/htcp'
import vue from 'vue'
import axios from 'axios'
import chartTree from '../modules/tree'
export default{
  components:{
  	setShow,chartTree
  },
	data(){
		return{
      boxheight:Object.freeze(240),
			disabled:false,
			noGroup:[],
      showDialog:false,
      // cptts:false,
      tableHeight:600,
      CodeToState:Object.freeze(CodeToState),
      CodeToType:Object.freeze(CodeToType),
      rankingloading:false,
      handleClick(row) {
        console.log(row);
      },
		}
	},
	async created() {
    // console.log({CodeToType})
    // const { cptts } = await getHisCptt().catch(()=>{})
    // console.log({cptts})
    // setTimeout(()=>{
    //   this.cptts = cptts
    // },500)
	},
  methods:{
    async getRanking(id,index){
      const { rankings } = await getRanking({id})
      this.cptts[index].rankings = rankings
      this.cptts[index].count = 5
      this.$set(this.cptts,index,this.cptts[index])
    },
    loadRanking(row,index){
      if(row.rankings.length <= row.count) return
      this.rankingloading=true
      setTimeout(()=>{
        row.count += 5
        this.rankingloading = false
      },2000)
    },
    async priview(row){
      console.log({row})
      this.showDialog = true
    }
  },
  computed:{
    typefilters(){
      const info = []
      for(const value in CodeToType)
        info.push({text:CodeToType[value],value})
      return info
    },
    cptts(){
      const cptts = this.$store.getters['ht/htcps']
      return cptts.length? cptts:false
    }
  }
}
</script>

<style lang="scss" scoped="scoped">
#admin-cptt-set{
// width:100%;
	.el-switch{
		margin-top:15px;
	}
	#acs-main{
		// width:400px;
		height:auto;
		display:flex;
		flex-wrap:wrap;
		.acs-aCptt{
			width:49%;
			height: 400px;
			position: relative;
		}
	}
}
//table
::v-deep .cell{
  white-space: nowrap !important;
  display: flex;
  align-items: center;
}
::v-deep .row-state{
  &-10{
    background-color: #f2f4f661;
  }
  &-11{
    background-color: #87ceeb3d;
  }
  &-20{
    background-color: #faf58346;
  }
  &-21{
    background-color: #ffa50038;
  }
  &-30{
    background-color: #ffff0061;
  }
}

::v-deep .demo-table-expand {
  .el-form-item__label{
    width: 100px;
    color: #99a9bf;
  }
  .el-form-item {
    margin:0;
    width: 100%;
  }
}
.ranking-list-item{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  background: #e8f3fe;
  margin: 10px;
  color: #7dbcfc;
  cursor: pointer;
  &.load{
    color: #000;
    background: #0000;
  }
}
</style>